<template>
	<view style="padding: 15px;">
		<u--form labelPosition='top' labelWidth='700rpx'  name="basic" layout="horizontal"
			:labelCol="{span:7}" :wrapperCol="{span: 13, offset: 0}" :rules="rules" ref="uForm" :model="formState">
			<!-- <u-collapse :value="['1','2']"> -->
				<!-- <u-collapse-item name="1" title="点位信息" icon="https://project.gxrunxiang.com/cdn/cell.png"> -->
					<u-form-item label="名称" name="Name" :required="true"  prop="Name">
						<u--input v-model="formState.Name" />
					</u-form-item>
					<u-form-item label="类型" @click="showpicker=true" :required="true" name="Ftype" prop="Ftype">
						<u--input v-model="formState.Ftype"  disabledColor="#ffffff" disabled/>
					</u-form-item>
					<u-form-item  @click="showLevel=true" :required="true" name="Level" prop="Level">
						<span slot="label">
							<span style="display: flex;">缆线等级 
								<u-icon name="question-circle" color="#2979ff" size="18"  @click.native.stop="showToast"></u-icon>
							</span>
						</span>
						<u--input allow-half v-model="formState.Level" disabledColor="#ffffff" disabled/>
					</u-form-item>
					<u-form-item label="皮长(米)" name="Length" prop="Length" :required="true">
						<u--input allow-half v-model="formState.Length" type="number"/>
					</u-form-item>
					<u-form-item label="厂商"   name="Factory">
						<u--input v-model="formState.Factory" />
					</u-form-item>
					<u-form-item label="芯数"  name="Num"  prop="Num" :required="true">
						<u-input allow-half v-model="formState.Num" @change="inputVal" type="number"/>
						
					</u-form-item>
					<u-form-item label="型号" name="Model" >
						<u--input allow-half v-model="formState.Model" />
					</u-form-item>
					<u-form-item label="编号" name="No">
						<u--input allow-half v-model="formState.No"/>
					</u-form-item>
					<!-- <u-form-item label="横向" name="x">
						<u--input allow-half v-model="formState.x" :disabled="ischange"/>
					</u-form-item>
					<u-form-item label="纵向" name="y" >
						<u--input allow-half v-model="formState.y" :disabled="ischange"/>
					</u-form-item> -->
<!-- 					<u-form-item label="纬度" name="Lat" :rules="[{ required: true, message: '请输入值' }]">
						<u--input allow-half v-model="formState.Lat" :min="0"/>
					</u-form-item>
					<u-form-item label="经度" name="Lng" :rules="[{ required: true, message: '请输入值' }]">
						<u--input allow-half v-model="formState.Lng" :min="0"/>
					</u-form-item> -->
					<u-action-sheet :show="showpicker" :actions="columns" title="请选择类型" @close="showpicker = false"
						@select="typeSelect">
					</u-action-sheet>
					<u-action-sheet :show="showLevel" :actions="levelColumns" title="请选择等级" @close="showLevel = false"
						@select="levelSelect">
					</u-action-sheet>
				</u-collapse-item>
				
<!-- 				<u-collapse-item name="2" title="设备照片" icon="https://project.gxrunxiang.com/cdn/image.png">
					<u-upload :sizeType="['compressed']" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
						<u-album :urls="imagesurls1"></u-album>
				</u-collapse-item> -->
			<!-- </u-collapse> -->
		</u--form>
		<br>
		<p>
			<u-button type="primary" text="保存" @click="save"></u-button>
		</p>
		<u-notify ref="uNotify"></u-notify>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/config.js'
	import {
		mapGetters
	} from 'vuex'

	import {
		addLinefiber,
		getlinefiber,
		LinefiberUpdate,
		GetListByParent
	} from '@/common/api.js'
	export default {
		data() {
			return {
				userinfo:{},
				formState: {
					Name: "",
					Length: 0,
					Ftype: "",
					Num: 0,
					Level: ""
				},
				fileList1: [],
				buildid: null,
				imagesurls1: [],
				id: null,
				notifyData: {
					message: '保存成功',
					type: 'success',
					color: '#ffffff',
					bgColor: '',
					fontSize: 15,
					duration: 2000,
					safeAreaInsetTop: false
				},
				columns: [],
				levelColumns: [],
				showpicker: false,
				showLevel: false,
				changeId: "",
				ischange: false,
				rules: {
					'Name': {
						type: 'string',
						required: true,
						message: '请填写名称',
						trigger: ['blur', 'change']
					},
					'Ftype': {
						type: 'string',
						required: true,
						message: '请填写类型',
						trigger: ['blur', 'change']
					},
					'Length': {
						required: true,
						message: '请填写皮长',
						trigger: ['blur', 'change']
					},
					'Num': {
						required: true,
						message: '请填写芯数',
						trigger: ['blur', 'change']
					},
					'Level': {
						required: true,
						message: '请填写等级',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad(option) {
			this.userinfo = JSON.parse(uni.getStorageSync("$userinfo"))
			GetListByParent("缆线类型", this.columns)
			GetListByParent("缆线等级",this.levelColumns)
			if(option.Id){
				this.ischange = true
				this.getchangelist(option.Id)
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		computed: {
			...mapGetters(['user']),
		},
		methods: {
			async getchangelist(Id) {
				let para = {
					Parameters: [{
						FieldName: "Id",
						ConditionalType: "Equal",
						FieldValue: Id
					}],
					orderBys: ["Id"],
				}
				await getlinefiber("", para).then(res => {
					this.formState = res.data[0]
					// this.formState.x = res.data[0].NxM.split(',')[0]
					// this.formState.y = res.data[0].NxM.split(',')[1]
					this.formState.Length = this.formState.Length.toString()
				})
			},
			save() {
				// this.formState.Buildid=this.buildid
				// uni.setStorageSync("temppoint", JSON.stringify(this.formState))
				// if(this.ischange){
				// 	LineequUpdate(this.formState).then(res => {
				// 		this.$refs.uNotify.show(this.notifyData)
				// 		uni.redirectTo({url: `/pages/index/Protect/lineequdetail?Id=${this.formState.Id}`})
				// 	})
				// }else{
				// 	addlineequ(this.formState).then(res => {
				// 		this.$refs.uNotify.show(this.notifyData)
				// 		uni.redirectTo({url: `/pages/index/Protect/lineequlist?NodeId=${this.formState.NodeId}`})
				// 	})
				// }
				if(this.formState.x && this.formState.y){
					this.formState.NxM = this.formState.x + ',' + this.formState.y
				}
				this.$refs.uForm.validate().then(res => {
					if(this.ischange){
						LinefiberUpdate(this.formState).then(res1 => {
							uni.navigateBack()
							this.$refs.uNotify.show(this.notifyData)
						})
					}else{
						addLinefiber(this.formState).then(res1 => {
							uni.navigateBack()
							this.$refs.uNotify.show(this.notifyData)
						})
					}	
					}).catch(errors => {
						console.log(errors);
						uni.$u.toast('请填写必填参数！')
					})	
			},
			typeSelect(e){
				this.formState.Ftype = e.name
			},
			levelSelect(e){
				this.formState.Level = e.name
			},
			inputVal(val){
				let temp = val.replace(/[^0-9.]+/g, '')
				this.$nextTick(()=>{
					this.formState.Num = temp
				})
			},
			showToast(){
				this.$refs.uToast.show({
					message: '本地网主干和支干在2023年12月定义如下：本地网主干：主前端机房至分前端机房、主（分）前端机房至乡镇机房间光缆线路；本地网支干：主（分）前端、乡镇机房等至网络末级分纤箱或集中分配器（含）线路。',
					type: 'default',
					duration: 3000
				})
			}
			// // 删除图片
			// deletePic(event) {
			// 	this[`fileList${event.name}`].splice(event.index, 1)
			// },
			// // 新增图片
			// async afterRead(event) {
			// 	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = [].concat(event.file)
			// 	let fileListLen = this[`fileList${event.name}`].length
			// 	lists.map((item) => {
			// 		this[`fileList${event.name}`].push({
			// 			...item,
			// 			status: 'uploading',
			// 			message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise(lists[i].url)
			// 		let item = this[`fileList${event.name}`][fileListLen]
			// 		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// },
			// uploadFilePromise(url) {
			// 	// console.log(this.user.Id)
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: `${baseUrl}/SysFile/upload?outid=${this.formState.Id||this.userinfo.Id}&type=设备照片`,
			// 			filePath: url,
			// 			name: 'file',
			// 			formData: {
			// 				user: 'test'
			// 			},
			// 			header: {
			// 				"Authorization": `Bearer ${this.$store.getters.$token}`
			// 			},
			// 			success: (res) => {
			// 				setTimeout(() => {
			// 					resolve(res.data.data)
			// 				}, 1000)
			// 			}
			// 		});
			// 	})
			// },
			// async getchangelist(){
			// 	let para = {
			// 		Parameters: [{
			// 			FieldName: "Id",
			// 			ConditionalType: "Equal",
			// 			FieldValue: this.changeId
			// 		}],
			// 		orderBys: ["Id"],
			// 	}
			// 	await getlineequlist(para).then(res => {
			// 		this.formState = res.data[0]
			// 	})
			// },
		}
	}
</script>

<style>

</style>
